<template>
  <div>
    <div class="tab">
      <Header />
    </div>
    <div class="list" @scroll="onScroll">
      <Tab />
    </div>
    <div class="box" @click="box">顶部</div>
  </div>
</template>
<script>
import Header from "../components/appheader";
import Tab from "../components/apptab";
import List from "../components/applist";
export default {
  components: {
    Header,
    Tab,
    List,
  },
  methods: {
    onScroll(e) {
      // console.log(e);
      var clientHeight = e.target.clientHeight;
      var scrollHeight = e.target.scrollHeight;
      var scrollTop = e.target.scrollTop;
      console.log(scrollTop);
      if (scrollHeight - scrollTop - clientHeight <= 1) {
        document.getElementsByClassName("box")[0].style.display = "block";
      }
    },
    box() {
      console.log((document.getElementsByClassName("list")[0].scrollTop = 0));
      document.getElementsByClassName("box")[0].style.display = "none";
    },
  },
};
</script>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.3rem;
}
.tab {
  width: 100%;
  height: 20vh;
  position: fixed;
  top: 0;
  left: 0;
}
.list {
  margin-top: 20vh;
  width: 100%;
  height: 80vh;
  overflow: auto;
}
.box {
  display: none;
  position: fixed;
  right: 0.1rem;
  bottom: 0.3rem;
  width: 1rem;
  height: 1rem;
  background: gainsboro;
  border: 1px solid gray;
  line-height: 1rem;
  text-align: center;
}
</style>